<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 70%; width: 70% }
    </style>
	<script type="text/javascript" src="js/jquery.min.js">
	</script>
	<script type="text/javascript">
	$(function(){
		$('p').click(function() {
			$('img').toggle();
			
			$('body').append('xx' + $.trim('  cv   ') + 'xx');
			
			//alert($.support.tbody + ' ' + $.browser.safari);
			
			var array = ['aa', 'bb', 'cc'];
			var text = '';
			$.each(array, function(n, value) {
				text += value;
			});
			
			alert(text);
			
			var json = '{    "glossary": {        "title": "example glossary",		"GlossDiv": {            "title": "S",			"GlossList": {                "GlossEntry": {                    "ID": "SGML",					"SortAs": "SGML",					"GlossTerm": "Standard Generalized Markup Language",					"Acronym": "SGML",				"Abbrev": "ISO 8879:1986",					"GlossDef": {                        "para": "A meta-markup language, used to create markup languages such as DocBook.",						"GlossSeeAlso": ["GML", "XML"]                    },					"GlossSee": "markup"                }            }        }    }}';

			parsedJson = $.parseJSON(json);
			
			alert(parsedJson.glossary.title);
		});
	});
	</script>
  </head>
  <body>
    
	<div>Lorem ipsum</div>
	<p>Hello world</p>
	
	<img src="images/castle.jpg" id="obrazek" style="display: none;"/>
  </body>
</html>